<template>
	<div class="card-main">
		<div class="wrapper" @click="closeCard" v-show="show">
			<div class="container" @click.stop="">
				<p>标题： {{cardDataInfo.gname}}</p>
				<p>描述： {{cardDataInfo.descr}}</p>
				<hr>
				<!-- 颜色列表 -->
				<p @click="changeCurrentSku(item)" v-for="item in cardDataInfo.skuList" :key="item.id">
					颜色描述： {{item.color_text}}
				</p>
				<hr>
				<h2>当前sku内容</h2>
				<p>库存： {{currentSkuInfo.count}}</p>
				<img style="width:200rpx;height:200rpx;" :src="currentSkuInfo.img" alt="">
				<button @click="selectOk">确定</button>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		name: 'CartCard',
		props:{
			cardDataInfo: {
				type: Object,
				required: true
			}
		},
		data(){
			return {
				show: false,
				currentSkuInfo: {}, // 当前显示的sku信息
			}
		},
		methods:{
			openCard(){
				this.show = true
				//对当前的sku信息进行初始化
				this.currentSkuInfo = this.cardDataInfo.skuList[0]
			},
			closeCard(){
				this.show = false
			},
			// 点击改变当前sku
			changeCurrentSku(sku){
				this.currentSkuInfo = sku
			},
			selectOk(){
				console.log(this.currentSkuInfo)
				// 通知外层
				var skuSel = {
					count: this.currentSkuInfo.count,
					skuId: this.currentSkuInfo.id
				}
				// 通知外层组件 假如需要
				this.$emit('select-ok',skuSel)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-main{
		 
		.wrapper{
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index:  999;
			background-color: rgba(0,0,0,.3);
			.container{
				width: 500rpx;
				height: 900rpx;
				background-color: #fff;
				margin: 100rpx auto;
			}
		}
		
	}
</style>
